<template>
  <div class="stats-panel honeywell-map-panel">
    <div class="stats-panel-head stats-form">
      <div class="stats-map">
        <div class="stats-form-group stats-checkbox refresh-checkbox">          
          <el-popover trigger="hover">
            <div>{{$t('report.staffView.tip1')}}</div>             
            <base-checkbox slot="reference" :value="isRefresh" @input="changeRefresh">{{$t('report.staffView.tip2')}}</base-checkbox>     
          </el-popover>
        </div>       
        <el-popover trigger="hover" class="mar-l-24">
          <ul>
            <i18n path="report.staffView.tip6" tag="li">
              <kbd place="keyName">ESC</kbd>
            </i18n>
            <li>{{$t('report.staffView.tip4')}}</li>
            <li>{{$t('report.staffView.tip5')}}</li>
          </ul>

          <button slot="reference" type="button" class="stats-fullscreen-btn" @click="fullScreen">
            <i class="iconfont icon-fullscreen"></i>
            <span class="mar-l-8">{{ $t('common.base.fullScreen') }}</span>
          </button>
        </el-popover>
      </div>

      <div class="stats-panel-check">
        <el-checkbox-group v-model="checkList" @change="checkChange">
          <el-checkbox :label="3" class="check-project">{{$t('common.base.systemKeyword.project')}}</el-checkbox>
          <i @click="showFilterDom('project')" class="iconfont icon-down mar-l-4" :class="hasProjectCondition ? 'active' : ''"></i>
          <el-checkbox :label="1" class="check-customer">{{$t('common.base.systemKeyword.customer')}}</el-checkbox>
          <i @click="showFilterDom('customer')" class="iconfont icon-down mar-l-4" :class="hasCustomerCondition ? 'active' : ''"></i>
          <el-checkbox :label="2" class="check-person">{{$t('common.base.person')}}</el-checkbox>
          <i @click="showFilterDom('person')" class="iconfont icon-down mar-l-4" :class="hasPersonCondition ? 'active' : ''"></i>
        </el-checkbox-group>
      </div>
    </div>
    <div class="stats-panel-body stats-map-wrap" ref="mapWrap">
      <div id="map"></div>
      <div class="filter-wrap" v-show="isShowFilterDom">
        <div class="project-filter-wrap" v-show="activeType == 'project'">
          <div class="filter-title">
            <div>{{$t('report.honeywellMap.selectProject')}}</div>
            <i class="iconfont icon-close" @click="closeFilterDom"></i>
          </div>
          <div class="filter-content">
            <el-form ref="projectForm" :model="projectForm" label-position="top">
              <el-form-item :label="$t('common.projectManage.projectTypeName')">
                <el-select v-model="projectForm.templateId" clearable :placeholder="$t('common.placeholder.select')" @change="refreshMap">
                  <el-option
                    v-for="item in projectTypes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('common.projectManage.detail.projectStatus')">
                <el-select v-model="projectForm.projectState" clearable :placeholder="$t('common.placeholder.select')" @change="refreshMap">
                  <el-option
                    v-for="item in projectStatus"
                    :key="item.code"
                    :label="item.name"
                    :value="item.code">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('common.fields.executorDepartment.displayName')">
                <biz-team-select
                  class="stats-team-select biz-team-select"
                  :value="projectForm.tags"
                  multiple
                  is-auto-select-child
                  @input="projectChooseTeam"
                  :fetch-func="fetchTeam"
                  :placeholder="$t('common.placeholder.select')"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="project-filter-wrap" v-show="activeType == 'customer'">
          <div class="filter-title">
            <div>{{$t('report.honeywellMap.selectCustomer')}}</div>
            <i class="iconfont icon-close" @click="closeFilterDom"></i>
          </div>
          <div class="filter-content">
            <el-form ref="customerForm" :model="customerForm" label-position="top">
              <el-form-item :label="$t('common.fields.serviceDept.displayName')">
                <biz-team-select
                  class="stats-team-select biz-team-select"
                  :value="customerForm.tags"
                  multiple
                  is-auto-select-child
                  @input="customerChooseTeam"
                  :fetch-func="fetchTeam"
                  :placeholder="$t('common.placeholder.select')"
                />
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="project-filter-wrap" v-show="activeType == 'person'">
          <div class="filter-title">
            <div>{{$t('report.honeywellMap.selectPerson')}}</div>
            <i class="iconfont icon-close" @click="closeFilterDom"></i>
          </div>
          <div class="filter-content">
            <el-form ref="personForm" :model="personForm" label-position="top">
              <el-form-item :label="$t('common.label.belongsToDepartment')">
                <biz-team-select
                  class="stats-team-select biz-team-select"
                  :value="personForm.tags"
                  multiple
                  is-auto-select-child
                  @input="personChooseTeam"
                  :fetch-func="fetchTeam"
                  :placeholder="$t('common.placeholder.select')"
                />
              </el-form-item>
              <el-form-item :label="$t('common.base.person')">
                <el-select v-model="personForm.userId" clearable :placeholder="$t('common.placeholder.select')" @change="userChange">
                  <el-option
                    v-for="item in userList"
                    :key="item.userId"
                    :label="item.displayName"
                    :value="item.userId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('common.base.workState')">
                <el-select v-model="personForm.state" clearable :placeholder="$t('common.placeholder.select')" @change="refreshMap">
                  <el-option
                    v-for="item in workStates"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div class="user-state-wrap">
              <div class="user-state-list">
                <div class="user-state-item" v-for="(item, index) in userStateColorList" :key="index">
                  <span class="user-state-color" :style="{'background': item.color}"></span>
                  <span class="user-state-text">{{ item.label }}：</span>
                  <span class="user-state-num">{{teamUserStateMap[item.label] || 0}}{{ $t('common.base.people') }}</span>
                </div>
                <div class="user-state-item">
                  <span class="user-state-color" :style="{'background': '#8c8c8c'}"></span>
                  <span class="user-state-text">{{ $t('report.common.noSetState') }}：</span>
                  <span class="user-state-num">{{teamUserStateMap['notSetState'] || 0}}{{ $t('common.base.people') }}</span>
                </div>
              </div>
              <div class="user-state-total">{{ $t('common.base.amountCount') }}：{{ amountCount }}{{ $t('common.base.people') }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/* api */ 
import { projectTypeList, getStatusStatisticList } from '@src/api/ProjectManage.ts';
import * as SettingApi from '@src/api/SettingApi'
import * as ReportApi from '@src/api/ReportApi.ts';
/* components */ 
import Loading from 'packages/BaseLoading'
import BaseCheckbox from 'packages/BaseCheckbox.vue';
/* utils */ 
import * as DomUtil from 'src/util/dom/index';
import { formatAddress } from 'pub-bbx-utils';
import http from 'src/util/HttpUtil';
import { openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
import { t } from '@src/locales'
import { getOssUrl } from '@src/util/assets'
import Platform from '@src/util/platform.ts';
const defaultAvatar = getOssUrl('/avatar.png')
/* hooks */ 
import { useNewVue } from '@hooks/useNewVue'
const { extendVue } = useNewVue();
/* global AMap*/
let map = null;
let customerCluster = null;
let personCluster = null;
let projectCluster = null;

let t1;

function timeChunk(arr, num, callback) {
  let delay = 25; 
  let timer = null;
  let _resolve = null;
  let _reject = null; // eslint-disable-line

  function done(){
    if(arr.length > 0) return invoke(arr);

    clearTimeout(timer);
    _resolve();
  }

  function invoke(arr){
    timer = setTimeout(function(){
      let data = arr.length > num ? arr.splice(0, num) : arr.splice(0);
      callback(data, done);
    }, delay);
  }

  return new Promise((resolve, reject) => {
    _resolve = resolve;
    _reject = reject;

    invoke(arr);
  });
}

export default {
  name: 'honeywell-map',
  data(){
    return {
      mapData: [], // 地图数据
      customerData: [], // 地图客户数据
      personData: [], //地图人员数据
      projectData: [], // 地图项目数据
      checkList: [1, 2, 3],
      isRefresh: false,
      isShowFilterDom: false, // 是否显示筛选
      activeType: '', // 当前点击的筛选类型
      projectTypes: [], // 项目类型数据
      projectStatus: [], // 项目状态数据
      workStates: [], // 工作状态数据
      userStateColorList: [], // 工作状态颜色数据
      teamUserStateMap: {},
      projectForm: {
        templateId: '',
        projectState: '',
        tags: [],
      },
      customerForm: {
        tags: [],
      },
      personForm: {
        tags: [],
        userId: '',
        state: '',
      },
      userList: [], // 用户数据
    };
  },
  computed: {
    hasProjectCondition() {
      if (this.projectForm.templateId || this.projectForm.projectState || this.projectForm.tags.length) return true
      return false
    },
    hasCustomerCondition() {
      if (this.customerForm.tags.length) return true
      return false
    },
    hasPersonCondition() {
      if (this.personForm.userId || this.personForm.state || this.personForm.tags.length) return true
      return false
    },
    amountCount() {
      let personData = this.mapData.filter(item => item.type == 2).filter(item => item.address && item.address.latitude && item.address.longitude)
      if (this.checkList.includes(2) && this.personForm.userId) {
        personData = personData.filter(item => item.userId === this.personForm.userId)
      }
      return personData.length
    },
  },
  methods: {
    formatAddress,
    fetchTeam(params){
      return http.post('/security/tag/tree', {...params, ...{authKey: 'VIP_REPORT_VIEW'}})
    },
    getProjectTypeList() {
      projectTypeList().then(res => {
        this.projectTypes = res.data || []
      })
    },
    getProjectStatusList() {
      getStatusStatisticList().then(res => {
        this.projectStatus = (res.result || []).map(item => {
          if (item.code == 'ALL') item.code = '';
          return item
        })
      })
    },
    getWorkStates() {
      http.get('/setting/workTime').then(res => {
        this.workStates = (res?.data?.workTimeConfig?.userStateType || []).map(item => {
          return {
            label: item,
            value: item
          }
        })
        const stateColorMap = res?.data?.workTimeConfig?.stateColorMap || {}
        for(let key in stateColorMap) {
          this.userStateColorList.push({
            label: key,
            color: stateColorMap[key]
          })
        }
      })
    },
    getUserList() {
      const teamId = this.personForm.tags.map(item => item.id).join(',')
      ReportApi.teamUser({teamId}).then(res => {
        this.userList = res || []
      })
    },
    openCustomerDetail(cId){
      let fromId = window.frameElement.getAttribute('id');
      openAccurateTab({
        type: PageRoutesTypeEnum.PageCustomerView,
        key: cId,
        params: 'noHistory=1',
        fromId
      })
    },
    openProjectViewTab(item) {
      let fromId = window.frameElement?.getAttribute('id');
      openAccurateTab({
        type: PageRoutesTypeEnum.PageProjectManageView,
        params: `templateId=${item.templateId}&id=${item.projectId}`,
        reload: true,
        fromId,
      })
    },
    changeRefresh(value){
      this.isRefresh = value;
      if(!this.isRefresh) return clearInterval(t1);   
      t1 = setInterval(() => {
        this.refreshMap();
      }, 300000);      
    },
    async refreshMap(){
      try {        
        let instance = Loading.show(this.$el)
        let res = await this.fetchMapData();
        this.mapData = res.result || []
        await this.renderMap(this.mapData)
        instance.hide();
      } catch (error) {
        console.log(error)
      }
    },
    fullScreen(){
      if(Platform.inDingTalk()) return;
      
      DomUtil.fullScreen(this.$refs.mapWrap);
    },
    async initMap() {
      try {
        map = new AMap.Map('map', {
          resizeEnable: true,
          center:[105, 34],
          zoom: 4,
          zooms: [4, 18]
        });

        let microTask = [];

        microTask.push(this.fetchMapData());
        microTask.push(new Promise((resolve, reject) => {
          map.plugin(['AMap.MarkerClusterer'], () => resolve(true));
        }));
        
        let instance = Loading.show(this.$el)
        let result = await Promise.all(microTask);

        this.mapData = result[0]?.result || []
        await this.renderMap(this.mapData)
        instance.hide();
      } catch (error) {
        console.log(error)
      }
    },
    // 渲染地图
    async renderMap(data = []){
      this.customerData = data.filter(item => item.type == 1).filter(item => item.address && item.address.latitude && item.address.longitude)
      this.personData = data.filter(item => item.type == 2).filter(item => item.address && item.address.latitude && item.address.longitude)
      if (this.checkList.includes(2) && this.personForm.userId) {
        this.personData = this.personData.filter(item => item.userId === this.personForm.userId)
      }
      this.projectData = data.filter(item => item.type == 3).filter(item => item.address && item.address.latitude && item.address.longitude)
      this.teamUserStateMap = this.buildTeamUserStateMap(this.personData);
      if(customerCluster) {
        customerCluster.clearMarkers();
        map.clearMap();
      }
      if(personCluster) {
        personCluster.clearMarkers();
        map.clearMap();
      }
      if(projectCluster) {
        projectCluster.clearMarkers();
        map.clearMap();
      }

      let customerMarkers = [];
      let personMarkers = [];
      let projectMarkers = [];

      let createMarker = this.createMarker;
      // 创建marker
      await timeChunk(this.customerData, 500, function(chunk, done){
        for(let i = 0; i < chunk.length; i++){
          customerMarkers.push(createMarker(chunk[i]))
        }
        done();
      })
      // 创建cluster
      customerCluster = new AMap.MarkerClusterer(map, customerMarkers, {
        maxZoom: 12,
        averageCenter: true,
        renderCluserMarker: context => this.renderCluserMarker(customerMarkers.length, context, 1)
      });

      // 创建marker
      await timeChunk(this.personData, 500, function(chunk, done){
        for(let i = 0; i < chunk.length; i++){
          personMarkers.push(createMarker(chunk[i]))
        }
        done();
      })
      // 创建cluster
      personCluster = new AMap.MarkerClusterer(map, personMarkers, {
        maxZoom: 12,
        averageCenter: true,
        renderCluserMarker: context => this.renderCluserMarker(personMarkers.length, context, 2)
      });

      // 创建marker
      await timeChunk(this.projectData, 500, function(chunk, done){
        for(let i = 0; i < chunk.length; i++){
          projectMarkers.push(createMarker(chunk[i]))
        }
        done();
      })
      // 创建cluster
      projectCluster = new AMap.MarkerClusterer(map, projectMarkers, {
        maxZoom: 12,
        averageCenter: true,
        renderCluserMarker: context => this.renderCluserMarker(projectMarkers.length, context, 3)
      });
    },
    fetchMapData(){
      const params = this.buildParams()

      return ReportApi.getHoneywellMapData(params)
    },
    buildTeamUserStateMap(teamUsers = []){
      let map = {};
      teamUsers.length && teamUsers.forEach(user => {
        let state = user.state;            
        if(map['notSetState'] == null) map['notSetState'] = 0;
        if(!state) return map['notSetState'] += 1;
        if(map[state] == null) map[state] = 0;
        map[state] += 1;
      })
      return map;
    },
    renderCluserMarker(count, context, type){
      let size = Math.round(10 + Math.pow(context.count / count, 1 / 5) * 30);
      let div = document.createElement('div');
      div.style.width = div.style.height = div.style.lineHeight = `${size }px`;
      let className = 'customer-map-cluser ripple'
      if (type == 2) {
        className = 'person-map-cluser ripple'
      } else if (type == 3) {
        className = 'project-map-cluser ripple'
      }
      div.className = className;
      div.innerHTML = `<span>${context.count}</span>`;
      context.marker.setOffset(new AMap.Pixel( -size / 2, -size / 2));
      context.marker.setContent(div)
    },
    createMarker(data){
      let address = data.address || {};

      let content = '<div class="map-marker customer-map-marker"></div>'
      if (data.type == 2) {
        content = document.createElement("div")
        let renderContent = {
          render(h) {
            return (
              <img class="map-marker" src={data.head || defaultAvatar} v-user={data.userId} />
            )
          }
        }
        let divVue = document.createElement("div")
        content.append(divVue)
        const vueDom = extendVue(renderContent)
        vueDom.$mount(divVue)
      } else if (data.type == 3) {
        content = '<div class="map-marker project-map-marker"></div>'
      }
      
      let marker = new AMap.Marker({
        position: [address.longitude, address.latitude],
        extData: data,
        content
      });

      marker.on('click', event => {
        let extData = marker.getExtData();
        // 客户和项目点击显示信息窗体
        if (extData.type == 1 || extData.type == 3) {
          this.showInfoWindow(extData, event.target)
        }
      })

      return marker;
    },
    showInfoWindow(item, target) {  
      let infoWindow = null
      //信息窗体的内容
      const that = this
      const renderContent = {
        render(h) {
          if (item.type == 1) {
            return (
              <div class="stats-honeywell-map">
                <i class="iconfont icon-close" onClick={() => infoWindow && infoWindow.close()}></i>
                <div class="stats-honeywell-row row-title"> 
                  <a class="customer-name" onClick={() => that.openCustomerDetail(item.customerId)}>{item.customerName}</a>
                </div>
                <div class="stats-honeywell-row">{t('common.base.contact')}：{item.lmName}</div>
                <div class="stats-honeywell-row">{t('common.base.phone')}：{item.lmPhone}</div>
                <div class="stats-honeywell-row">{t('common.base.locationMap.address')}：{formatAddress(item.address)}</div>
              </div>
              
            )
          } else if (item.type == 3) {
            return (
              <div class="stats-honeywell-map">
                <i class="iconfont icon-close" onClick={() => infoWindow && infoWindow.close()}></i>
                <div class="stats-honeywell-row row-title">{ item.projectName }</div>
                <div class="stats-honeywell-row">
                  {t('common.fields.projectNumber.displayName')}：
                  <a class="project-no" onClick={() => that.openProjectViewTab(item)}>{item.projectNo}</a>
                </div>
                <div class="stats-honeywell-row">
                  {t('common.base.customer')}：
                  <a class="customer-name" onClick={() => that.openCustomerDetail(item.customerId)}>{item.customerName}</a>
                </div>
                <div class="stats-honeywell-row">{t('common.base.locationMap.address')}：{formatAddress(item.address)}</div>
              </div>
            )
          }
        }
      }
      let content = document.createElement("div")
      let divVue = document.createElement("div")
      content.append(divVue)
      const vueDom = extendVue(renderContent)
      vueDom.$mount(divVue)

      //创建 infoWindow 实例
      infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        closeWhenClickMap: true,
        content, //传入字符串拼接的 DOM 元素
        anchor: 'top-left',
        offset: new AMap.Pixel(20, -40),
        position: target.getPosition(),
      });

      //打开信息窗体
      infoWindow.open(map, target.getPosition()); 
    },
    showFilterDom(type) {
      if (type == this.activeType) {
        this.isShowFilterDom = !this.isShowFilterDom
      } else {
        this.isShowFilterDom = true
      }
      this.activeType = type
    },
    closeFilterDom() {
      this.isShowFilterDom = false
      this.activeType = ''
    },
    // 筛选类型数据变化
    checkChange() {
      if (this.checkList.length == 0) {
        this.mapData = []
        return this.renderMap([])
      }
      this.refreshMap()
    },
    // 人员数据变化
    async userChange(value) {
      this.personForm.userId = value
      this.renderMap(this.mapData)
    },
    projectChooseTeam(value) {
      this.projectForm.tags = value || []
      this.refreshMap()
    },
    customerChooseTeam(value) {
      this.customerForm.tags = value || []
      this.refreshMap()
    },
    personChooseTeam(value) {
      this.personForm.tags = value || []
      this.personForm.userId = ''
      this.getUserList()
      this.refreshMap()
    },
    buildParams() {
      const params = {
        type: this.checkList
      }
      if (this.checkList.includes(1)) {
        params.customerTeamIdList = this.customerForm.tags.map(item => item.id)
      }
      if (this.checkList.includes(2)) {
        params.state = this.personForm.state
        params.userTeamIdList = this.personForm.tags.map(item => item.id)
      }
      if (this.checkList.includes(3)) {
        params.templateId = this.projectForm.templateId
        params.projectState = this.projectForm.projectState
        params.projectTeamIdList = this.projectForm.tags.map(item => item.id)
      }
      return params
    },
  },
  mounted(){
    this.getProjectTypeList()
    this.getProjectStatusList()
    this.getWorkStates()
    this.getUserList()
    this.$nextTick(()=>{
      this.initMap()
    })
  },
  components: {
    [BaseCheckbox.name]: BaseCheckbox,
  }
}
</script>

<style lang="scss">
@import 'src/modules/report/common/common.scss';
#map {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 78px);
}

.honeywell-map-panel {
  .stats-map{
    flex: 1;
    display: flex;
  }
  .stats-form {
    color: #595959;
  }
  .stats-form .stats-form-group {
    margin: 0;
  }
  .stats-panel-head {
    background: #fff;
    height: 52px;
    padding: 12px 16px;
  }
  .base-checkbox .base-checkbox-input {
    margin-right: 8px;
  }
  .stats-panel-check {
    .el-checkbox {
      color: #262626;
      font-weight: normal;
      margin-left: 24px;
    }
    .iconfont {
      cursor: pointer;
      &.active {
        color: $color-primary;
      }
    }
    .check-project {
      .el-checkbox__inner {
        border-color: #136AC2 !important;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner {
        border-color: #136AC2 !important;
        background-color: #136AC2 !important;
      }
    }
    .check-customer {
      .el-checkbox__inner {
        border-color: #C21396 !important;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner {
        border-color: #C21396 !important;
        background-color: #C21396 !important;
      }
    }
    .check-person {
      .el-checkbox__inner {
        border-color: $color-primary !important;
      }
    }
    .el-checkbox__input.is-checked + .el-checkbox__label {
      color: #262626 !important;
    }
  }
  .stats-fullscreen-btn {
    width: auto;
    display: flex;
    align-items: center;
    .icon-fullscreen {
      color: #3d3d3d;
    }
  }
  .stats-map-wrap{
    position: relative;
    height: 100%;
    width: 100%;
  }
  .map-marker{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #fff;
    &.customer-map-marker {
      background-color: #C21396;
    }
    &.person-map-marker {
      background-color: $color-primary;
    }
    &.project-map-marker {
      background-color: #136AC2;
    }
  }
  .ripple{
    position: relative;
    border-radius: 50%;
    margin: 0 auto;
    box-shadow: 0 0 4px rgba(0,0,0,.45);
    font-size: 14px;
    text-align: center;
    &:hover span{
      color: #fff;
    }
    span{
      color: #fff;
    }
    &.customer-map-cluser {
      background-color: #C21396;
    }
    &.person-map-cluser {
      background-color: $color-primary;
    }
    &.project-map-cluser {
      background-color: #136AC2;
    }
  }
  .ripple:after,
  .ripple:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    border: 0.5px solid #C21396;
    border-radius: 50%;
    box-shadow: 0 0 1px rgba(0, 0, 0, .25)
  }
  .ripple.person-map-cluser:before, .ripple.person-map-cluser:after {
    border: 0.5px solid $color-primary;
  }
  .ripple.project-map-cluser:before, .ripple.project-map-cluser:after {
    border: 0.5px solid #136AC2;
  }

  .ripple:before{
    animation:opac 2s linear infinite;
  }

  .ripple:after{
    animation:opac 2s linear infinite 1s;
  }

  .stats-honeywell-map{
    position: relative;
    padding: 12px 30px 12px 12px;
    width: 330px;
    background: #fff;
    // border: 1px solid #D9D9D9;
    box-shadow: 0px 4px 8px 0px rgba(8, 30, 66, 0.25);
    .icon-close {
      position: absolute;
      right: 10px;
      top: 8px;
      cursor: pointer;
      color: #666;
      font-size: 14px;
    }
    .stats-honeywell-row{
      display: flex;
      flex-flow: row nowrap;
      line-height: 22px;
      font-size: 13px;
      &.row-title {
        font-size: 16px;
        font-weight: 500;
        line-height: 26px;
      }
      a {
        cursor: pointer;
      }
    }
  }

  .project-filter-wrap {
    width: 320px;
    background: #fff;
    position: absolute;
    right: 5px;
    top: 0;
    padding: 12px 16px;
    box-shadow: -4px 1px 8px 0px rgba(0, 0, 0, 0.12);
    .filter-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
      div {
        font-weight: 500;
      }
      .iconfont {
        cursor: pointer;
      }
    }
    .stats-team-select.biz-team-select {
      margin-left: 0;
    }
    .el-select {
      width: 288px;
    }
    .biz-team-select-tag {
      max-width: 98%;
    }
    .user-state-wrap {
      .user-state-list {
        display: flex;
        flex-wrap: wrap;
      }
      .user-state-item {
        width: 50%;
        display: flex;
        align-items: center;
        .user-state-color {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin-right: 4px;
        }
      }
      .user-state-item, .user-state-total {
        color: #595959;
        line-height: 14px;
        font-size: 12px;
        margin-bottom: 12px;
      }
    }
  }
}

@keyframes opac{
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2);
  }
}
</style>
